{% extends 'origin.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css' %}">
{% endblock %}

{% block content %}
    <div class="container">
        <div style="margin-bottom:10px">
            <button type="button" class="btn btn-primary" id="btnAdd">添加</button>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel"></h4>
                    </div>
                    <div class="modal-body">
                         <form id="form1" method="post" novalidate>
                            {% csrf_token %}
                            {% for field in form %}
                                <div class="form-group">
                                    <label>{{field.label}}</label>
                                    {{field}}
                                    <span class="error-msg" style="color:red">{{field.errors.0}}</span>
                                </div>
                            {% endfor %}
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="save">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">{{title}}</div>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th style="text-align:center;vertical-align:middle">编号</th>
                        <th style="text-align:center;vertical-align:middle">用户名</th>
                        <th style="text-align:center;vertical-align:middle">密码</th>
                        <th style="text-align:center;vertical-align:middle">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                        <tr>
                            <th style="text-align:center;vertical-align:middle">{{item.id}}</th>
                            <th style="text-align:center;vertical-align:middle">{{item.username}}</th>
                            <th style="text-align:center;vertical-align:middle">{{item.password}}</th>
                            <th style="text-align:center;vertical-align:middle">
                                <input uid="{{item.id}}" class="btn btn-primary btn-xs btn-edit" type="button" value="修改">
                                <input uid="{{item.id}}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除">

                                <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="alert alert-danger alert-dismissible fade in" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                            <h4>请确认是否删除!</h4>
                                            <p>若确认删除，相关的数据将全部被删除。</p>
                                            <p>
                                                <button id="comfirmdelete" type="button" class="btn btn-danger">删除</button>
                                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                            </th>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
    <script type="text/javascript">
        var EDIT_ID;
        var DELETE_ID;

        $(function(){
            $('#id_date').datetimepicker({
                language:'zh-CN',
                format:'yyyy-mm-dd',
                minView:'month',
                todayBtn:1,
                todayHighlight:1,
                autoclose:true
            });
        });

        $(function(){
            clickButAdd();
            clickButEdit()
            clickButSave();
            clickButDel();
            clickButConfirmDel();
        })

        function clickButAdd(){
            $("#btnAdd").click(function(){
                EDIT_ID = undefined;
                // 清空表单。$("#form_add")为jQuery对象，$("#form_add")[0]为DOM对象
                $("#form1")[0].reset();
                // 点击按钮，显示对话框
                $("#myModal").modal("show");
                // 修改对话框标题
                $("#myModalLabel").text("添加");

            })
        }

        function clickButEdit(){
            $(".btn-edit").click(function(){
                var uid = $(this).attr("uid");
                EDIT_ID = uid;
                $("#form1")[0].reset();
                $.ajax({
                    url:"/user/detail/",
                    type:"get",
                    data:{"uid":uid},
                    dataType:"JSON",
                    success:function(res){
                        if(res.status){
                            $("#myModal").modal("show");
                            $("#myModalLabel").text("修改");
                            $.each(res.data,function(name,value){
                                $("#id_"+name).val(value);
                            })
                        }else{
                            alert(res.error)
                        }
                    }
                })
            })
        }

        function clickButSave(){
            $("#save").click(function(){
                $(".error-msg").empty();
                if(EDIT_ID){
                    EditSave();
                }else{
                    AddSave();
                }
            })
        }

        function clickButDel(){
            $(".btn-delete").click(function(){
                $("#deleteModal").modal("show");
                DELETE_ID = $(this).attr("uid");
            })
        }

        function clickButConfirmDel(){
            $("#comfirmdelete").click(function(){
                $.ajax({
                    url:"/user/delete/",
                    type:"get",
                    data:{"uid":DELETE_ID},
                    dataType:"JSON",
                    success:function(res){
                        if(res.status){
                            $("#deleteModal").modal("hide");
                            location.reload();
                        }else{
                            alert(res.tips);
                        }
                    }
                })
            })
        }

        function AddSave(){
            $.ajax({
                url:"/user/add/",
                type:"post",
                data:$("#form1").serialize(),
                dataType:"JSON",
                success:function(res){
                    console.log("ok")
                    if(res.status){
                        location.reload();
                    }else{
                        $.each(res.error,function(name,errorlist){
                            $("#id_"+name).next().text(errorlist[0]);
                        })
                    }
                }
            })
        }

        function EditSave(){
            $.ajax({
                url:"/user/edit/" + "?uid=" + EDIT_ID,
                type:"post",
                data:$("#form1").serialize(),
                dataType:"JSON",
                success:function(res){
                    if(res.status){
                        $("#form1")[0].reset();
                        $("#myModal").modal("hide");
                        location.reload();
                        EDIT_ID = 0;
                    }else{
                        if(res.tips){
                            alert(res.tips);
                        }else{
                            $.each(res.error,function(name,errorlist){
                                $("#id_"+name).next().text(errorlist[0])
                            })
                        }
                    }
                }
            })
        }
    </script>

{% endblock %}